<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useOrderStore } from "@/stores";
  import { useRouter } from "vue-router";

  const orderStore = useOrderStore();
  const router = useRouter();
  const modalVisible = ref(false);
  const orders = ref<any>([]);
  const order = ref<any>({});

  onMounted(async () => {
    orders.value = await orderStore.getOrderList();
  });

  function handleView(record: any) {
    router.push({
      name: "OrderDetail",
      params: { id: record.id },
    });
  }

  async function handleSave() {
    await orderStore.saveOrder({ ...order.value });
    modalVisible.value = false;
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['订单管理', '订单列表']"></Breadcrumb>
    <a-card :bordered="false">
      <a-table :data="orders">
        <template #columns>
          <a-table-column title="订单编号" data-index="code" />
          <a-table-column title="支付金额" data-index="payableAmount" />
          <a-table-column title="实付金额" data-index="paidAmount" />
          <a-table-column title="订单状态">
            <template #cell="{ record }">
              <Tag group="order_status" :value="record.statusValue" />
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="180" />
          <a-table-column title="更新时间" data-index="updatedAt" :width="180" />
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" size="small" @click="handleView(record)">详情</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" title="订单信息" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="订单状态">
          <a-input placeholder="请输入字典标签" v-model="order.label"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
